<template>  
    <BaseContent>
      <div class="row">
        <div class="col-2">
          <div class="user_navbar">
            <div class="user_info">
              <div>
                <router-link class="nav-link active" aria-current="page" :to="{ name: 'manageaccount' }">用户账号信息</router-link>
              </div>
            </div>
            <div class="user_post">
              <div>
                <router-link class="nav-link active" aria-current="page" :to="{ name: 'managedyanmic' }">用户动态管理</router-link>
              </div>
            </div>
            <div class="user_post">
              <div>
                <router-link class="nav-link active" aria-current="page" :to="{ name: 'confirmreturnbook' }">用户图书管理</router-link>
              </div>
            </div>
            <div class="user_post">
              <div>
                <router-link class="nav-link active" aria-current="page" :to="{ name: 'userborrowedbook' }">用户所借图书</router-link>
              </div>
            </div>
            <div class="user_book">
              <div>
                <router-link class="nav-link active" aria-current="page" :to="{ name: 'managerecentlymessage' }">最近消息</router-link>
              </div>
            </div>
            <!-- <div class="user_peruse">
              <div>
                <router-link class="nav-link active" aria-current="page" :to="{ name: 'userperuse' }" v-if="!$store.state.user.is_superuser">最近阅览</router-link>
              </div>
            </div>
            <div class="user_message">
              <div>
                <router-link class="nav-link active" aria-current="page" :to="{ name: 'usermessage' }" v-if="!$store.state.user.is_superuser">书友留言</router-link>
              </div>
            </div> -->
          </div>
        </div>
        <div class="col-10">
          <slot></slot>
        </div>
      </div>
    </BaseContent>
  </template>  
    
  <script>  
  import BaseContent from '@/components/BaseContent.vue';
  export default {  
      name: "UserView",  
      components: {  
          BaseContent
      },  
  }  
  </script>  
    
  <style scoped>
  .user_navbar {
    height: 600px;
    width: 180px;
    background-color: gray;
    user-select: none;
  }
  .user_info {
    width: 100%;
    height: 50px;
    background-color: gray;
    border: 1px;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .user_info:hover {
    background-color: lightgrey;
    transition: 500ms;
    cursor: pointer;
  }
  .user_post {
    width: 100%;
    height: 50px;
    background-color: gray;
    border: 1px;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .user_post:hover {
    background-color: lightgrey;
    transition: 500ms;
    cursor: pointer;
  }
  .user_book {
    width: 100%;
    height: 50px;
    background-color: gray;
    border: 1px;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .user_book:hover {
    background-color: lightgrey;
    transition: 500ms;
    cursor: pointer;
  }
  .user_peruse {
    width: 100%;
    height: 50px;
    background-color: gray;
    border: 1px;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .user_peruse:hover {
    background-color: lightgrey;
    transition: 500ms;
    cursor: pointer;
  }
  .user_message {
    width: 100%;
    height: 50px;
    background-color: gray;
    border: 1px;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .user_message:hover {
    background-color: lightgrey;
    transition: 500ms;
    cursor: pointer;
  }
  </style>